import React, { Component, Fragment } from 'react';
import { Card, Spin, Form, Row, Col, Button, Input, Radio, message } from 'antd';
import { connect } from 'dva';
import HeaderTab from '@/components/HeaderTab';
import styles from './index.less';
import router from 'umi/router';
@Form.create()
class OrderSetting extends Component {

    state = {
        tabs: [
            {
                title: '交易设置',
                key: `/${window.storeId}/order/settings`,
                // disabled: true
            },
            {
                title: '消息通知',
                key: `/${window.storeId}/order/setting/notices`,
            },
        ],
    }

    
    componentWillMount() {
        window.Isoption = false;
      }

    componentDidMount() {
        this.init();
        window.Isoption = true;
    }
    init = () => {
        const { dispatch } = this.props
        dispatch({
            type: 'orderdetail/GetStoreOrderConfig',
            params: {}
        })
    }
    validateMinite = (rule, value, callback) => {
        if (!new RegExp('^[0-9]*$').test(value)) {
            callback("订单取消时间必须在20-4320分钟之间！")
        }
        if (value < 20 || value > 4320) {
            callback("订单取消时间必须在20-4320分钟之间！")
        }
        callback()
    }
    validateSureDay = (rule, value, callback) => {
        if (!new RegExp('^[0-9]*$').test(value)) {
            callback("自动确认收货时间必须在3-15天之间！")
        }
        if (value < 3 || value > 15) {
            callback("自动确认收货时间必须在3-15天之间！")
        }
        callback()
    }
    handleSubmit = (e) => {
        let { dispatch, match } = this.props;

        this.props.form.validateFields((err, values) => {
            if (!err) {

                console.log(values)
                dispatch({
                    type: `orderdetail/SetStoreOrderConfig`,
                    params: { ...values, p: Math.random() },
                    callBack: {
                        success: (data) => {
                            message.success('设置成功')
                            this.init()
                        },
                        error: (data) => {
                            console.log(data)
                            message.error('设置失败')
                        }
                    }

                });

            }
        });
    }

    // 头部状态切换
    onTabChange = id => {
        this.setState(
            {
                activeId: id,
            },
            () => {
                router.replace({
                    pathname: `${id}`,
                });
            }
        );
    };

    render() {
        const { orderConfig, loading, loadBtn } = this.props
        const {
            getFieldDecorator, getFieldsError, getFieldError, isFieldTouched, getFieldValue
        } = this.props.form;
        const { tabs } = this.state;
        const formItemLayout = {
            labelCol: {
                span: 6
            },
            wrapperCol: {
                span: 16
            },
        };
        const tailFormItemLayout = {
            wrapperCol: {
                xs: {
                    span: 8,
                    offset: 6,
                },
                sm: {
                    span: 8,
                    offset: 6,
                },
            },
        };
        return (
            <Fragment>
                {/* <HeaderTab
                    _this={this}
                    type="slider"
                    activeId={this.state.activeId}
                    onChange={this.onTabChange}
                    tabs={tabs}
                >

                </HeaderTab> */}
                <Spin spinning={loading}>
                    <Card
                        bordered={false}
                        className={styles.OrderSetting}
                    >
                        <Form>
                            <Form.Item
                                {...formItemLayout}
                                label={<span className="ant-form-item-required">待付款订单取消时间</span>}
                            >
                                <Row>
                                    <Col span={3}>下单完成后</Col>
                                    <Col span={7}>
                                        {getFieldDecorator('AutoCloseTime', {
                                            initialValue: orderConfig && orderConfig.AutoCloseTime,
                                            rules: [{ validator: this.validateMinite, }],
                                        })(
                                            <Input placeholder="" addonAfter="分" />
                                        )}
                                    </Col>
                                    <Col span={12}>内未付款，订单自动关闭</Col>
                                </Row>
                            </Form.Item>
                            <Form.Item
                                {...formItemLayout}
                                label={<span className="ant-form-item-required">发货后自动确认收货时间</span>}
                            >
                                <Row>
                                    <Col span={3}>订单发货后</Col>
                                    <Col span={7}>
                                        {getFieldDecorator('SureDay', {
                                            initialValue: orderConfig && orderConfig.SureDay,
                                            rules: [{ validator: this.validateSureDay, }],
                                        })(
                                            <Input placeholder="" addonAfter="天" />
                                        )}
                                    </Col>
                                    <Col span={12}>内未收货，订单自动确认收货</Col>
                                </Row>
                            </Form.Item>
                            <Form.Item
                                {...formItemLayout}
                                label="订单完成后可申请售后的时间"
                            >
                                <Row>
                                    <Col span={3}>订单完成后</Col>
                                    <Col span={7}>
                                        {getFieldDecorator('RightsDay', {
                                            initialValue: orderConfig && orderConfig.RightsDay,
                                            rules: [{ required: true, pattern: new RegExp('^[3-7]$'), message: '可售后时间必须在3-7天之间!' }],
                                        })(
                                            <Input placeholder="" addonAfter="天" />
                                        )}
                                    </Col>
                                    <Col span={12}>内可申请售后维权</Col>
                                </Row>
                            </Form.Item>
                            <Form.Item
                                {...formItemLayout}
                                label="系统自动好评时间"
                            >
                                <Row>
                                    <Col span={3}>订单完成后</Col>
                                    <Col span={7}>
                                        {getFieldDecorator('EvaluatedDay', {
                                            initialValue: orderConfig && orderConfig.EvaluatedDay,
                                            rules: [{ required: true, pattern: new RegExp('^[3-7]$'), message: '默认好评时间必须在3-7天之间!' }],
                                        })(
                                            <Input placeholder="" addonAfter="天" />
                                        )}
                                    </Col>
                                    <Col span={12}>未进行评价，系统默认五星好评</Col>
                                </Row>
                            </Form.Item>
                            <Form.Item
                                {...formItemLayout}
                                label="评价审核："
                                extra="开启后，用户的评价需要后台审核后才能在商品评价中显示"

                            >
                                {getFieldDecorator('IsEvaluated', {
                                    initialValue: orderConfig && orderConfig.IsEvaluated,
                                    rules: [],
                                })(
                                    <Radio.Group>
                                        <Radio value={true}>开启</Radio>
                                        <Radio value={false}>关闭</Radio>
                                    </Radio.Group>
                                )}
                            </Form.Item>

                            <Form.Item
                                {...tailFormItemLayout}
                            >
                                <Button
                                    type="primary"
                                    loading={loadBtn}
                                    onClick={this.handleSubmit}
                                >保存</Button>
                            </Form.Item>

                        </Form>
                    </Card>

                </Spin>
            </Fragment>
        );
    }
}
export default connect(({ orderdetail, global, loading }) => ({
    orderConfig: orderdetail.orderConfig,
    oemInfo: global.oemInfo,
    loading: loading.effects['orderdetail/GetStoreOrderConfig'],
    loadBtn: loading.effects['orderdetail/SetStoreOrderConfig'],
}))(OrderSetting)
